<template>
  <div class="app-container">
    <QueryForm v-model="queryForm" :form-items="formItems" @query="handleQuery" @reset="handleReset('form')" />
    <div class="base-table">
      <div class="action">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd('add')">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </div>
      <el-table v-if="refreshTable" :default-expand-all="isExpandAll" header-row-class-name="headerRow" :data="menuList"
        row-key="_id" :tree-props="{ children: 'children' }">
        <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
          :width="item.width" :formatter="item.formatter">
          <template #default="scope" v-if="item.prop == 'icon'">
            <i :class="'iconfont icon-' + scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <div class="operate">
              <div class="operate-btn" @click="handleAdd('add', scope.row)">
                <el-icon :size="12" color="#409efc">
                  <FolderAdd />
                </el-icon>
                新增
              </div>
              <div class="operate-btn" @click="handleAdd('edit', scope.row)" size="mini">
                <el-icon :size="12" color="#409efc">
                  <Edit />
                </el-icon>
                编辑
              </div>
              <div class="operate-btn" @click="handleDel(scope.row._id)">
                <el-icon :size="12" color="#409efc">
                  <Delete />
                </el-icon>
                删除
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <MenuAdd title="菜单新增" v-if="showModal" v-model:show="showModal" :menuOptions="menuList" :action="action" :Item="Item" @close="handleClose">
    </MenuAdd>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, getCurrentInstance } from 'vue'
import utils from "@/utils/utils"
import QueryForm from "@/components/QueryForm/index.vue"
import MenuAdd from './component/menu-add.vue'
import { ElMessage } from 'element-plus'
const action = ref('add')
const Item = ref({})
const { proxy } = getCurrentInstance();
const $Tajax = proxy.$Tajax;
// 查询表单配置
const formItems = [
  {
    type: 'input',
    label: '菜单名称',
    prop: 'menuName',
    placeholder: '请输入菜单名称'
  },
  {
    type: 'select',
    label: '菜单状态',
    prop: 'menuState',
    placeholder: '请选择菜单状态',
    options: [
      { value: 1, label: '正常' },
      { value: 2, label: '停用' }
    ]
  }
]
const refreshTable = ref(true);
const isExpandAll = ref(true);
// 表格列配置
const columns = [
  {
    label: "菜单名称",
    prop: "menuName",
    width: 150,
  },

  {
    label: "图标",//排序
    prop: "icon",
    width: 100,
  },
  {
    label: "路由名称",
    prop: "routeName",
    width: 150,
  },
  {
    label: "菜单类型",
    prop: "menuType",
    formatter(row, column, value) {
      return {
        'M': "目录",
        'C': "菜单",
        'F': "按钮",
      }[value]
    },
  },
  {
    label: "权限标识",
    prop: "menuCode",
  },
  {
    label: "路由地址",
    prop: "path",
  },
  {
    label: "排序",//排序
    prop: "orderNum",
    width: 90,
  },
  {
    label: "菜单状态",
    prop: "menuState",
    width: 90,
    formatter(row, column, value) {
      return {
        1: "正常",
        2: "停用",
      }[value]
    },
  },
  {
    label: "创建时间",
    prop: "createTime",
    formatter(row, column, value) {
      return utils.formateDate(new Date(value))
    },
  },
]
// 响应式状态
const queryForm = reactive({
  menuState: null,
})
const menuList = ref([])
const showModal = ref(false)
const dialogForm = ref(null)

// 方法定义
const handleQuery = () => {
  console.log(queryForm)
  getMenuList()
}

// 菜单列表初始化
const getMenuList = async () => {
  try {
    const list = await $Tajax.getMenuList(queryForm)
    menuList.value = list
  } catch (e) {
    throw new Error(e)
  }
}

// 表单重置
const handleReset = (form) => {
  dialogForm.value.resetFields()
  this.getMenuList()
}

// 新增\编辑菜单
const handleAdd = (type, row) => {
  action.value = type
  Item.value = row
  setTimeout(() => {
    showModal.value = true
  }, 100)
}


// 删除菜单
const handleDel = async (_id) => {
  await $Tajax.menuSubmit({ _id, action: "delete" })
  ElMessage.success("删除成功")
  getMenuList()
}


// 弹框关闭
const handleClose = (e) => {
  showModal.value = false
  if (e) {
    getMenuList()
  }
}

/** 展开/折叠操作 */
function toggleExpandAll() {
  refreshTable.value = false;
  isExpandAll.value = !isExpandAll.value;
  nextTick(() => {
    refreshTable.value = true;
  }, 100);
}

// 生命周期钩子
onMounted(() => {
  getMenuList()
})
</script>

<style lang="scss">
.headerRow {
  height: 45px;
  background: #f8f8f9;
  border: #f1f1f1;
}
</style>